<template>

  <div>
<!--    <header>-->
<!--      <Navbar/>-->
<!--    </header>-->
    <div id="container">
      <div id="pagetop">
        <el-col :span="8" style="font-size: 20px ;text-align: left;margin-left: 5%">
          宠爱一生温馨小屋
        </el-col>

        <el-col :span="5" style="font-size: 20px">
          <el-input
              placeholder="请输入内容"
              v-model="name"
              clearable>
          </el-input>
        </el-col>
        <el-col :span="1" style="font-size: 20px">
          <el-button type="" icon="el-icon-thumb" circle @click="showPets()"></el-button>
        </el-col>
        <el-col :span="7" style="font-size: 20px">
          <marquee direction="up" height="25px" style="text-indent:20px;text-align: right;margin-right: 14%">
            今日正式上线！
          </marquee>
        </el-col>
      </div>
      <div id="pagetop2" style="text-align: left; padding-left: 20px;">
        <br>
        <el-row style="line-height: 50px">
          <el-col :span="3" style="font-size: 20px"><b>爱宠选择</b></el-col>
        </el-row>
        <el-row style="line-height: 30px">
          <el-col :span="2"><b>是否领养</b></el-col>
          <div v-for="adopt in adopts">
            <el-col :span="2" @click.native=SearchByAdopt(adopt)>{{ adopt }}</el-col>
          </div>
        </el-row>
        <el-row style="line-height: 30px">
          <el-col :span="2"><b>性&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp别</b></el-col>
          <div v-for="sex in sexs">
            <el-col :span="2" @click.native=SearchBySex(sex)>{{ sex }}</el-col>
          </div>
        </el-row>
        <el-row style="line-height: 30px">
          <el-col :span="2"><b>年&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp龄</b></el-col>
          <div v-for="age in ages">
            <el-col :span="2" @click.native=SearchByAge(age)>{{ age }}</el-col>
          </div>
        </el-row>
        <el-row style="line-height: 20px">&nbsp</el-row>
      </div>
      <div id="pagebody">
        <div id="bleft"></div>
        <div id="bmiddle">

          <div id="pet_view" v-for="i in real_size">
            <div id="pet_pic" @click="findThePet(PetData[i-1].id)">
              <el-image
                  style="width: 100%; height: 130px"
                  :src="PetData[i-1].picture"></el-image>
              <div id="pet_name">
                &nbsp&nbsp{{ PetData[i - 1].name }} &nbsp
              </div>
              <div id="pet_sex">
                {{ PetData[i - 1].sex }} &nbsp
              </div>
              <div id="pet_breed">
                {{ PetData[i - 1].breed }} &nbsp
              </div>
              <div id="pet_age">
                &nbsp&nbsp年龄 {{ PetData[i - 1].age }}个月
              </div>
            </div>
          </div>
        </div>
        <div id="bright"></div>
      </div>
      <div id="pagefooter">
        <div id="select_page">
          <el-pagination
              @current-change="handleCurrentChange"
              :current-page.sync="current"
              :page-size="size"
              layout="prev, pager, next, jumper"
              :total="totlalElement">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Navbar from '../common/Navbar'
import axios from "axios";
export default {
  name: "index",
  components:{
    Navbar
  },
  data: function () {
    return {
      isCollapse: true,
      name: "",
      littleAge: 1,
      biggerAge: 1000,
      sex: "",
      ifAdopt: "",
      current: 1,
      size: 15,
      real_size: 15,
      PetData: "",
      totlalElement: 0,
      adopts: ["全部", "已领养", "未领养"],
      sexs: ["全部", "公的", "母的"],
      ages: ["全部", "0-6个月", "6个月-2岁", "2岁-8岁", "8岁以上"],
    }
  },
  mounted: function () {
    this.showPets()
  },
  methods: {
    findThePet(id) {
      this.$router.push({
        path: "/specificPet", //这个是跳转的页面
        query: {
          petId: id,
        },
      });
    },
    SearchByAdopt(adopt) {
      if (adopt === "全部") {
        this.ifAdopt = "";
        this.showPets();
      } else {
        this.ifAdopt = adopt;
        this.showPets();
      }
    },
    SearchBySex(sex) {
      if (sex === "全部") {
        this.sex = ""
        this.showPets()
      } else if (sex === "母的") {
        this.sex = "母"
        this.showPets()
      } else {
        this.sex = "公"
        this.showPets()
      }
    },
    SearchByAge(age) {
      if (age === "全部") {
        this.age = ""
        this.littleAge = 0
        this.biggerAge = 1000
        this.showPets()
      } else if (age === "0-6个月") {
        this.littleAge = 0
        this.biggerAge = 6
        this.showPets()
      } else if (age === "6个月-2岁") {
        this.littleAge = 6
        this.biggerAge = 24
        this.showPets()
      } else if (age === "2岁-8岁") {
        this.littleAge = 24
        this.biggerAge = 48
        this.showPets()
      } else {
        this.littleAge = 48
        this.biggerAge = 1000
        this.showPets()
      }
    },
    handleCurrentChange(val) {
      this.current = val
      this.showPets()
      console.log(`当前页: ${val}`);
    },
    showPets() {
      this.size = 15;
      let str = ""
      if (this.name != "") {
        console.log(this.name)
        str = str + "&name=" + this.name;
      }
      if (this.sex != "") {
        str = str + "&sex=" + this.sex;
      }
      if (this.ifAdopt != "") {
        str = str + "&ifAdopt=" + this.ifAdopt;
      }
      axios
          .post(this.$store.state.url+':8412/pet/findPets?' +
              "&littleAge=" + this.littleAge + "&biggerAge=" + this.biggerAge +
              "&current=" + this.current + "&size=" + this.size + str)
          .then((data) => {
            console.log("查找宠物中。。。")
            console.log(data);
            this.PetData = data.data.data
            this.totalPage = data.data.totalPage
            this.totlalElement = data.data.totalElement
            if (this.totlalElement == 0) {
              alert("没有查到任何资料")
              this.real_size = 0;
            }
            this.real_size = data.data.data.length
            console.log(this.PetData)
          })
          .catch((err) => {
            console.log(err);
          });
    },
  }
}
</script>

<style scoped>
#container {
  width: 1300px;
  margin: auto;
}

#pagetop {
  line-height: 100px;
  background-color: aliceblue;
  min-height: 100px;
}

#pagetop2 {
  background-color: #99a9bf;
  min-height: 100px;
}

#pagebody {
  min-height: 650px;
  background: white;


}

#pagefooter {
  min-height: 100px;
  clear: both;
}

#bleft {
  float: left;
  width: 10px;
  min-height: 600px;
  background: white;

}

#bmiddle {
  float: left;
  width: 1240px;
  min-height: 300px;
  padding: 10px;
}

#bright {
  float: left;
  width: 1px;
  min-height: 600px;
  background: white;
}

#pet_view {
  background-color: rgba(255, 255, 255, 0.5);
  width: 15%;
  margin-right: 5%;
  float: left;
  min-height: 150px;
  margin-top: 30px;
}

#pet_name {
  text-align: left;
  float: left;
}

#pet_sex {
  text-align: left;
  float: left;
}

#pet_breed {
  text-align: left;
}

#pet_age {
  text-align: left;
}

#select_page {
  background-color: rgba(255, 255, 255, 0.5);
  margin-left: 70%;
  margin-right: 40px;
  text-align: right;
  margin-top: 40px;
}
</style>